<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" class="mr-5" placeholder="请输入用户账号" suffix-icon="el-icon-search"
                v-model="userName"></el-input>
      <el-input style="width: 200px" class="mr-5" placeholder="请输入登录IP地址" suffix-icon="el-icon-search"
                v-model="ipaddr"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button class="ml-5" type="warning" @click="reSet">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button type="danger" plain @click="batchDelete"><i class="el-icon-remove-outline"
                                                             style="margin-right: 5px"/>批量删除
      </el-button>
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="访问编号" prop="infoId" width="80" align="center"></el-table-column>
      <el-table-column label="用户名称" prop="userName" align="center"></el-table-column>
      <el-table-column label="登录地址" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
      <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
      <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
      <el-table-column label="操作系统" align="center" prop="os" />
      <el-table-column label="登录状态" align="center">
        <template slot-scope="scope">
          <el-button type="success" plain v-if="scope.row.status">成 功</el-button>
          <el-button type="danger" plain v-if="!scope.row.status">失 败</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作信息" align="center" prop="msg" />
      <el-table-column label="登录日期" align="center" prop="loginTime" :show-overflow-tooltip="true">
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "LoginInfo",
  data() {
    return {
      tableData: [],
      postIds: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      from: {},
      ipaddr: "",
      userName: "",
      dialogFormVisible: false,
      headerBg: "headerBg",
      title: ""
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.request.get("/sys-login-info/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          userName: this.userName,
          ipaddr: this.ipaddr
        }
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      })
    },
    handleSelectionChange(val) {
      this.postIds = val;
    },
    batchDelete() {
      let ids = this.postIds.map(v => v.infoId);
      this.$confirm('是否确认删除这些访问数据？').then(() => {
        this.request.post("/sys-login-info/batchDelete", ids).then(res => {
          if (res.code === 200) {
            this.$message.success("批量删除成功");
            this.load();
          } else {
            this.$message.error("删除失败");
          }
        })
      })
    },
    excelExport() {
      window.open("http://localhost:9876/sys-login-info/export")
    },
    reSet() {
      this.userName = "";
      this.ipaddr = "";
      this.load();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    }
  }
}
</script>

<style>
.headerBg {
  background-color: #eee !important;
}
</style>
